import React, { Component } from 'react'
import { inAndOutRecordStatistics, studentNumberStatistics, teacherNumberStatistics, intAndOutcountInAndOutFrequentlyAccessPeopleByMonth, findHighRiskChart, findChuru, findHighWenToday, intAndOutcountInAndOutRecordByDay, findHighWenChart, findWeidaRecordToDay, findHighRisk, intAndOutlistInAndOutRecord, totalDepartmentPeopleNumber, listAbnormalStudent, findCurrentQkStudent ,intAndOutlistFrequentlyAccessStudentRecord} from '../api/api'
import ReactEcharts from 'echarts-for-react';
import { Spin, Radio } from 'antd'
import moment from 'moment'

export default class Home extends Component {

  state = {
    xueNum: '',
    xueCount: '',
    waiNum: '',
    waiCount: '',
    jiaoNum: '',
    jiaoCount: '',
    xuebao: '',
    xuewei: '',
    shibao: '',
    shsiwei: '',
    timeDate1: [],//异常高风险时间
    hieghtDengerDate1: [],//异常高风险数据
    wenData1: [],
    churuData1: [],
    isShow1: 1,
    timeDate2: [],
    weidakaDate2: [],//未打卡
    hieghtDengerDate2: [],//高风险地区打卡
    churuData2: [],
    wenData2: [],
    handSize: '1',
    XyOutIn6: [],
    XyOutIn: [],
    handSize1: '2',
    DakayuanxiName: [],
    PersonTotal: [],
    ShangbaoPerson: [],
    DakayuanxiName15: [],
    ShangbaoPerson15: [],
    PersonTotal15: [],
    AbnormalStudent: [],
    NoPunchStudent: [],
    churupinfan:[]
  }
  componentDidMount() {
    this.inAndOutRecordStatistics();
    this.studentNumberStatistics();
    this.teacherNumberStatistics();
    this.intAndOutcountInAndOutFrequentlyAccessPeopleByMonth();
    this.findHighRiskChart();
    this.findHighWenChart();
    this.intAndOutcountInAndOutRecordByDay();
    this.findChuru();
    this.findWeidaRecordToDay();
    this.findHighRisk();
    this.findHighWenToday();
    this.intAndOutlistInAndOutRecord();
    this.TotalDepartmentPeopleNumber();
    this.listAbnormalStudent();
    this.fetchNoPunch();
    this.intAndOutlistFrequentlyAccessStudentRecord();
  }
  intAndOutlistFrequentlyAccessStudentRecord=async()=>{
    const res=await intAndOutlistFrequentlyAccessStudentRecord()
    if(res.code===20000){
      this.setState({
        churupinfan:res.data
      })
      console.log(res.data,"111112222222222222222222222")
    }
  }
  //查询当天打卡异常人员信息
  listAbnormalStudent = () => {
    listAbnormalStudent().then(res => {
      if (res.code === 20000) {
        this.setState({
          AbnormalStudent: res.data || [],
        })
      }
    })
  }
  findHighWenToday = async () => {
    const res = await findHighWenToday({ flag: 1 })
    if (res.code === 20000) {
      this.setState({
        wenData2: res.data && res.data.length ? res.data.map(x => { return x.num }) : []
      })
    }
  }
  findHighWenToday2 = async () => {
    const res = await findHighWenToday({ flag: 2 })
    if (res.code === 20000) {
      this.setState({
        wenData2: res.data && res.data.length ? res.data.map(x => { return x.num }) : []
      })
    }
  }
  findHighRisk = async () => {
    const res = await findHighRisk({ flag: 1 })
    if (res.code === 20000) {
      this.setState({
        hieghtDengerDate2: res.data && res.data.length ? res.data.map(x => { return x.num }) : []
      })
    }
  }
  findHighRisk2 = async () => {
    const res = await findHighRisk({ flag: 2 })
    if (res.code === 20000) {
      this.setState({
        hieghtDengerDate2: res.data && res.data.length ? res.data.map(x => { return x.num }) : []
      })
    }
  }
  findWeidaRecordToDay = async () => {
    const res = await findWeidaRecordToDay({ flag: 1 })
    if (res.code === 20000) {
      this.setState({
        weidakaDate2: res.data && res.data.length ? res.data.map(x => { return x.num }) : []
      })
    }
  }
  findWeidaRecordToDay2 = async () => {
    const res = await findWeidaRecordToDay({ flag: 2 })
    if (res.code === 20000) {
      this.setState({
        weidakaDate2: res.data && res.data.length ? res.data.map(x => { return x.num }) : []
      })
    }
  }
  findChuru = async () => {
    const res = await findChuru({ flag: 1 })
    this.setState({
      timeDate2: res.data && res.data.time && res.data.time.length ? res.data.time.map((item) => {
        return moment(item).format('MM-DD')
      }) : [],
    })
  }
  //最近14天出入记录（学生）
  intAndOutcountInAndOutRecordByDay = async () => {
    const res = await intAndOutcountInAndOutRecordByDay({ type: 2 });
    if (res.code === 20000) {
      this.setState({
        churuData2: res.data && res.data.length ? res.data.map(x => { return x.num }) : []
      })
    }
  }
  intAndOutcountInAndOutRecordByDay2 = async () => {
    const res = await intAndOutcountInAndOutRecordByDay({ type: 2 });
    if (res.code === 20000) {
      this.setState({
        churuData2: res.data && res.data.length ? res.data.map(x => { return x.num }) : []
      })
    }
  }
  //高温
  findHighWenChart = async () => {
    const res = await findHighWenChart({ flag: 1 })
    if (res.code === 20000) {
      this.setState({
        wenData1: res.data && res.data.length ? res.data.map((item) => {
          return item.num
        }) : [],
        isShow1: 2
      })
    } else {
      this.setState({
        isShow1: 3
      })
    }
  }
  //高风险
  findHighRiskChart = async () => {
    const res = await findHighRiskChart({ flag: 1 })
    if (res.code === 20000) {
      this.setState({
        timeDate1: res.data && res.data.length ? res.data.map((item) => {
          return item.times
        }) : [],
        hieghtDengerDate1: res.data && res.data.length ? res.data.map((item) => {
          return item.num
        }) : [],
        isShow1: 2
      })
    } else {
      this.setState({
        isShow1: 3
      })
    }
  }//频繁出入
  intAndOutcountInAndOutFrequentlyAccessPeopleByMonth = async () => {
    const res = await intAndOutcountInAndOutFrequentlyAccessPeopleByMonth({ type: 2 })
    if (res.code === 20000) {
      this.setState({
        churuData1: res.data && res.data.reverse().length ? res.data.map((item) => {
          return item.num
        }) : [],
        isShow1: 2
      })
    } else {
      this.setState({
        isShow1: 3
      })
    }
  }
  teacherNumberStatistics = async () => {
    const res = await teacherNumberStatistics()
    if (res.code === 20000) {
      this.setState({ shibao: res.data.teacherSuccess, shiwei: res.data.totalTeacher - res.data.teacherSuccess })
    }
  }
  studentNumberStatistics = async () => {
    const res = await studentNumberStatistics()
    if (res.code === 20000) {
      this.setState({ xuebao: res.data.studentSuccess, xuewei: res.data.totalStudent - res.data.studentSuccess })
    }
  }
  inAndOutRecordStatistics = async () => {
    const res = await inAndOutRecordStatistics()
    if (res.code === 20000) {
      res.data.map((item) => {

        if (item.person_type == 2) {
          this.setState({
            xueNum: item.personNumber,
            xueCount: item.inAndOutNumber
          })
        } else if (item.person_type == 3) {
          this.setState({
            waiNum: item.personNumber,
            waiCount: item.inAndOutNumber
          })
        } else if (item.person_type == 1) {
          this.setState({
            jiaoNum: item.personNumber,
            jiaoCount: item.inAndOutNumber
          })
        }
      })
    }
  }
  handleSizeChange = (e) => {
    const { handSize } = this.state
    if (e.target.value === '1') {
      if (e.target.value === handSize) {
        return
      }
      this.setState({
        handSize: '1',
      }, () => {
        this.findHighRisk()
        this.findHighWenToday()
        this.findWeidaRecordToDay()
        this.intAndOutcountInAndOutRecordByDay()  //最近14天数据
      })
    } else if (e.target.value === '2') {
      if (e.target.value === handSize) {
        return
      }
      this.setState({
        handSize: '2',
      }, () => {
        this.findHighRisk2()
        this.findWeidaRecordToDay2()
        this.intAndOutcountInAndOutRecordByDay2()
        this.findHighWenToday2()
      })
    }
  }
  handleSizeChange1 = async (e) => {
    this.setState({ handSize1: e.target.value })
    const res = await intAndOutlistInAndOutRecord({ type: e.target.value })
    if (res.code === 20000) {
      this.setState({
        XyOutIn: res.data || [],
        XyOutIn6: res.data.slice(0, 12)
      })
    }
  }

  // 校园出入记录数据请求
  intAndOutlistInAndOutRecord = async type => {
    type = this.state.handSize1
    const res = await intAndOutlistInAndOutRecord({ type })
    if (res.code === 20000) {
      this.setState({
        XyOutIn: res.data || [],
        XyOutIn6: res.data.slice(0, 12),
      }, () => {
        // this.times(type)
      })
      //    console.log("学生出入记录",res)
    }
  }

  //定时器函数
  TimeSetInterval = () => {
    var indexNum = 1;
    var indexPages = 12;
    var indexNum2 = 1;
    var indexPages2 = 12;
    this.timerAllPeosonDaka = setInterval(() => {
      if (indexNum >= Math.ceil(this.state.DakayuanxiName.length / indexPages)) {
        indexNum = 0
      }
      if (indexNum === (Math.ceil(this.state.DakayuanxiName.length / indexPages) - 1)) {
        this.setState({
          DakayuanxiName15: this.state.DakayuanxiName.slice(indexPages * indexNum),
          ShangbaoPerson15: this.state.ShangbaoPerson.slice(indexPages * indexNum),
          PersonTotal15: this.state.PersonTotal.slice(indexPages * indexNum),
        });
      } else {
        this.setState({
          DakayuanxiName15: this.state.DakayuanxiName.slice(indexNum * indexPages, (indexNum + 1) * indexPages),
          ShangbaoPerson15: this.state.ShangbaoPerson.slice(indexNum * indexPages, (indexNum + 1) * indexPages),
          PersonTotal15: this.state.PersonTotal.slice(indexNum * indexPages, (indexNum + 1) * indexPages),
        });
      }
      if (indexNum2 >= Math.ceil(this.state.NewDataList.length / indexPages2)) {
        indexNum2 = 0
      }
      if (indexNum2 === (Math.ceil(this.state.NewDataList.length / indexPages2) - 1)) {
        this.setState({
          NewDataList6: this.state.NewDataList.slice(indexPages2 * indexNum2),
        });
      } else {
        this.setState({
          NewDataList6: this.state.NewDataList.slice(indexNum2 * indexPages2, (indexNum2 + 1) * indexPages2),
        });
      }


      if (indexNum2 >= Math.ceil(this.state.XyOutIn.length / indexPages2)) {
        indexNum2 = 0
      }
      if (indexNum2 === (Math.ceil(this.state.XyOutIn.length / indexPages2) - 1)) {
        this.setState({
          XyOutIn6: this.state.XyOutIn.slice(indexPages2 * indexNum2),
        });
      } else {
        this.setState({
          XyOutIn6: this.state.XyOutIn.slice(indexNum2 * indexPages2, (indexNum2 + 1) * indexPages2),
        });
      }

      indexNum += 1;//NewDataList
      indexNum2 += 1;
    }, 30000);
  }

  // 查询每个部门老师和学生人数总和和每日打卡人数总和
  TotalDepartmentPeopleNumber = async () => {
    const res = await totalDepartmentPeopleNumber()
    if (res.code === 20000) {//department_name//totalPeople//department_id
      var dakayuanxiName = [];
      var shangbaoPerson = [];
      var personTotal = [];
      res.data.forEach((item, index) => {
        dakayuanxiName.push(item.department_name);
        shangbaoPerson.push({ value: item.successPeople });
        personTotal.push({ value: item.totalPeople })
      })
      //console.log(res.data)
      this.setState({
        DakayuanxiName: dakayuanxiName,
        ShangbaoPerson: shangbaoPerson,
        PersonTotal: personTotal,
        DakayuanxiName15: dakayuanxiName.slice(0, 12),
        ShangbaoPerson15: shangbaoPerson.slice(0, 12),
        PersonTotal15: personTotal.slice(0, 12),
      })
    }
  }
  // 查询学生超过两天未打卡的人员信息
  fetchNoPunch = async () => {
    const res = await findCurrentQkStudent()
    if (res.code === 20000) {
      console.log(res, '333333333333333333333')
      this.setState({
        NoPunchStudent: res.data,
      })
    }
  }
  render() {
    const { xueNum, xueCount, waiNum, waiCount, jiaoNum, jiaoCount, xuebao, shibao, xuewei, shiwei, timeDate1, hieghtDengerDate1, wenData1, churuData1, isShow1, timeDate2, weidakaDate2, hieghtDengerDate2, churuData2, wenData2, handSize, XyOutIn6, handSize1, DakayuanxiName, NoPunchStudent,churupinfan,
      PersonTotal, ShangbaoPerson, DakayuanxiName15, ShangbaoPerson15, PersonTotal15, AbnormalStudent } = this.state
    const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
    const option1 = {
      title: {
        text: '学生每月异常情况走势图（近6个月）',
        textStyle: {
          color: '#fff',
          fontSize: 12,
          fontWeight: 400
        },
        left: 'center',
        top: '0'
      },
      legend: {
        icon: 'circle',
        top: '8%',
        right: '0',
        itemWidth: 6,
        itemGap: 20,
        textStyle: {
          color: '#556677'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgb(23, 115, 236)'
              }, {
                offset: 0.5,
                color: 'rgb(108, 167, 243)',
              }, {
                offset: 1,
                color: 'rgb(198, 223, 253)'
              }],
              global: false
            }
          },
        },
      },
      grid: {
        top: '25%',
        right: '5%',
        left: '10%',
        bottom: '12%'
      },
      xAxis: [{
        type: 'category',
        data: timeDate1,
        axisLine: {
          lineStyle: {
            color: 'rgba(107,107,107,0.37)', //x轴颜色
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#999' //坐标轴字颜色
          },
          margin: 10
        },
        axisPointer: {
          label: {
            padding: [11, 5, 7],
            backgroundColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#fff' // 0% 处的颜色
              }, {
                offset: 0.9,
                color: '#fff' // 0% 处的颜色
              }, {
                offset: 0.9,
                color: '#33c0cd' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#33c0cd' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        boundaryGap: false
      }],
      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        // min:0,
        // max:3000,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(107,107,107,0.37)', //y轴颜色
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999'
          }
        },
        splitLine: {
          show: false
        }
      }],
      series: [{
        name: '温度异常打卡',
        type: 'line',
        data: wenData1,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'rgb(4,146,250)',
          }
        },
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          normal: {
            color: 'rgb(4,146,250)',
          }
        }
      }, {
        name: '频繁出入',
        type: 'line',
        data: churuData1,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'rgb(47, 148, 138)',
          }
        },
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          normal: {
            color: 'rgb(47, 148, 138)',
          }
        }
      }, {
        name: '高风险打卡',
        type: 'line',
        data: hieghtDengerDate1,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#8f60c5',
          }
        },
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          normal: {
            color: '#8f60c5',
          }
        }
      }]
    }
    const option2 = {
      // backgroundColor: '#fff',
      title: {
        text: '每天异常情况走势图(近14天)',
        textStyle: {
          color: '#fff',
          fontSize: 12,
          fontWeight: 400
        },
        left: 'center',
        top: '0'
      },
      legend: {
        icon: 'circle',
        top: '8%',
        right: '0',
        itemWidth: 6,
        itemGap: 20,
        textStyle: {
          color: '#556677'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgb(23, 115, 236)'
              }, {
                offset: 0.5,
                color: 'rgb(108, 167, 243)',
              }, {
                offset: 1,
                color: 'rgb(198, 223, 253)'
              }],
              global: false
            }
          },
        },
      },
      grid: {
        top: '25%',
        left: "10%",
        right: '5%',
        bottom: 40
      },
      xAxis: [{
        type: 'category',
        data: timeDate2,
        axisLine: {
          lineStyle: {
            color: 'rgba(107,107,107,0.37)', //x轴颜色
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          rotate: 45,
          textStyle: {
            color: '#999' //坐标轴字颜色
          },
          margin: 15
        },
        axisPointer: {
          label: {
            padding: [11, 5, 7],
            backgroundColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#fff' // 0% 处的颜色
              }, {
                offset: 0.9,
                color: '#fff' // 0% 处的颜色
              }, {
                offset: 0.9,
                color: '#33c0cd' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#33c0cd' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        boundaryGap: false
      }],
      yAxis: [{
        type: 'value',
        // min:0,
        // max:100,
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(107,107,107,0.37)', //y轴颜色
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999'
          }
        },
        splitLine: {
          show: false
        }
      }],
      series: [{
        name: '未打卡',
        type: 'line',
        data: weidakaDate2,
        // symbolSize: 1,
        // symbol: 'circle',
        // smooth: true,
        // yAxisIndex: 0,
        // showSymbol: false,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#62e7e7',
          }
        },
        lineStyle: {
          width: 3,
          // shadowColor: 'rgba(158,135,255, 0.3)',
          // shadowBlur: 10,
          // shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: '#62e7e7',
            borderColor: colorList[0]
          }
        }
      },
      {
        name: '高风险地区打卡',
        type: 'line',
        data: hieghtDengerDate2,
        // symbolSize: 1,
        // symbol: 'circle',
        // smooth: true,
        // yAxisIndex: 0,
        // showSymbol: false,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'red',
          }
        },
        lineStyle: {
          width: 3,
          // shadowColor: 'rgba(115,221,255, 0.3)',
          // shadowBlur: 10,
          // shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: 'red',
            borderColor: colorList[1]
          }
        }
      }, {
        name: '每天出入人数',
        type: 'line',
        data: churuData2,
        // symbolSize: 1,
        // symbol: 'circle',
        // smooth: true,
        // yAxisIndex: 0,
        // showSymbol: false,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#ebb34b',
          }
        },
        lineStyle: {
          width: 3,
          // shadowColor: 'rgba(125,271,295, 0.3)',
          // shadowBlur: 10,
          // shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: '#ebb34b',
            borderColor: colorList[1]
          }
        }
      }, {
        name: '温度异常打卡',
        type: 'line',
        data: wenData2,
        // symbolSize: 1,
        // symbol: 'circle',
        // smooth: true,
        // yAxisIndex: 0,
        // showSymbol: false,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#8f60c5',
          }
        },
        lineStyle: {
          width: 3,
          // shadowColor: 'rgba(125,271,295, 0.3)',
          // shadowBlur: 10,
          // shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: '#8f60c5',
            borderColor: colorList[1]
          }
        }
      }
      ]
    }
    // const option3 = {
    //   tooltip: {
    //     trigger: 'item',
    //     borderColor: '#FFFFCC',
    //     showDelay: 0,
    //     hideDelay: 0,
    //     enterable: true,
    //     transitionDuration: 0,
    //     extraCssText: 'z-index:100',
    //     formatter: function (params, ticket, callback) {
    //         //根据业务自己拓展要显示的内容
    //         var res = "";
    //         var name = params.name;
    //         var value = params.value[params.seriesIndex + 1];
    //         // res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
    //         // return res;
    //         if (params.seriesType == "effectScatter") {
    //             return "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
    //         } else if (params.seriesType == "lines") {
    //             return "数据：" + params.data.value;
    //         }
    //     }
    // },
    // visualMap: { //图例值控制
    //     min: 0,
    //     max: 500,
    //     calculable: false,
    //     show: false,
    //     bottom: '10',
    //     itemWidth: "12%",
    //     itemHeight: "80%",
    //     text: ['High', 'Low'],
    //     color: ['rgb(230,18,17)', 'rgb(250,252,3)', 'rgb(3,146,251)'],
    //     textStyle: {
    //         color: '#fff'
    //     }
    // },
    // geo: {
    //     map: 'china',
    //     zoom: 1.2,
    //     top: '20%',
    //     bottom: '20%',
    //     label: {
    //         emphasis: {
    //             show: false
    //         }
    //     },
    //     roam: false, //是否允许缩放
    //     itemStyle: {
    //         normal: {
    //             color: 'rgba(9,30,87)', //地图背景色
    //             borderColor: 'rgb(27,254,254)', //省市边界线00fcff 516a89
    //             borderWidth: 1
    //         },
    //         emphasis: {
    //             color: 'rgba(37, 43, 61, .5)' //悬浮背景
    //         }
    //     }
    // },
    // // series: series
    // }
    // const option4 = {
    //   geo: {
    //     map: 'china',
    //     zoom: 1.2,
    //     top: '20%',
    //     bottom: '20%',
    //     label: {
    //       emphasis: {
    //         show: false
    //       }
    //     },
    //     roam: false, //是否允许缩放
    //     itemStyle: {
    //       normal: {
    //         color: 'rgba(9,30,87)', //地图背景色
    //         borderColor: 'rgb(27,254,254)', //省市边界线00fcff 516a89
    //         borderWidth: 3
    //       },
    //     }
    //   },
    //   series: [
    //     {
    //       type: 'map',
    //       map: '',
    //       geoIndex: 0,
    //     }]
    // }

    const option5 = {
      color: ['#of8de7', 'ff3abc'],
      animation: false,
      "grid": {
        top: '20%',
        right: '3%',
        left: '7%',
        bottom: '24%'
      },
      "legend": {
        "show": true,
        top: 5,
        right: 'center',
        data: ['上报人数', '总人数'],
        textStyle: {
          color: "RGB(193,223,255)"
        }
      },
      "xAxis": [{
        "type": "category",
        "data": DakayuanxiName15,
        "axisTick": {
          "alignWithLabel": true
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(35,78,138)',
            width: 2
          }
        },
        axisTick: {
          show: false
        },
        "axisLabel": {
          rotate: 30,
          interval: 0,
          "textStyle": {
            "color": "#e2e9ff",
            fontSize: 8,
          },
          formatter: function (val) {
            var strs = val.split(''); //字符串数组
            var str = ''
            for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
              str += s;
              if (!(i % 5)) str += '\n'; //按需要求余
            }
            return str
          }
        }
      }],
      "yAxis": [{
        "type": "value",
        "axisLabel": {
          "textStyle": {
            "color": "#e2e9ff"
          },
          "formatter": "{value}"
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(35,78,138)',
            width: 2
          }
        },
        "splitLine": {
          show: false,
          "lineStyle": {
            "type": "dashed",
            "color": "RGB(47,68,114)"
          }
        },
      }],
      "series": [{
        name: '上报人数',
        type: 'bar',
        //silent: true,
        "barWidth": "10",
        barGap: '-10%', // Make series be overlap
        "data": ShangbaoPerson15,
        itemStyle: {
          normal: {
            color: '#14f9ed' // 0% 处的颜色
          },
        },
      },
      {
        name: '总人数',
        type: 'bar',
        //silent: true,
        "barWidth": "10",
        //barGap: '-100%', // Make series be overlap
        "data": PersonTotal15,
        itemStyle: {
          normal: {
            color: '#e6343a' // 0% 处的颜色
          },
        },
      }
      ]
    }
    return (
      <div className="content">
        <div className="imgheader"><img src={require('./img/imgHeader.png').default} alt="" /></div>
        <div className="home-top">
          <div className="box" style={{ border: '1px solid #F37631' }}>
            <div className="left">
              <div className="left-1"><img src={require('./img/1.png').default} alt="" /></div>
              <div className="left-2" style={{ color: '#F37631' }}>健康统计打卡</div>
            </div>
            <div className="right">
              <div className="right-1">学生上报人数</div>
              <div className="right-2" style={{ color: '#F37631' }}>{xuebao ? xuebao : 0}人</div>
            </div>
          </div>

          <div className="box" style={{ border: '1px solid #DB71FF' }}>
            <div className="left">
              <div className="left-1"><img src={require('./img/2.png').default} alt="" /></div>
              <div className="left-2" style={{ color: '#DB71FF' }}>健康统计打卡</div>
            </div>
            <div className="right">
              <div className="right-1">学生未上报人数</div>
              <div className="right-2" style={{ color: '#DB71FF' }}>{xuewei ? xuewei : 0}人</div>
            </div>
          </div>

          <div className="box" style={{ border: '1px solid #3AFFFF' }}>
            <div className="left">
              <div className="left-1"><img src={require('./img/3.png').default} alt="" /></div>
              <div className="left-2" style={{ color: '#3AFFFF' }}>健康统计打卡</div>
            </div>
            <div className="right">
              <div className="right-1">教职工上报人数</div>
              <div className="right-2" style={{ color: '#3AFFFF' }}>{shibao ? shibao : 0}人</div>
            </div>
          </div>

          <div className="box" style={{ border: '1px solid #FF7D83' }}>
            <div className="left">
              <div className="left-1"><img src={require('./img/4.png').default} alt="" /></div>
              <div className="left-2" style={{ color: '#FF7D83' }}>健康统计打卡</div>
            </div>
            <div className="right">
              <div className="right-1">教职工未上报人数</div>
              <div className="right-2" style={{ color: '#FF7D83' }}>{shiwei ? shiwei : 0}人</div>
            </div>
          </div>

          <div className="box" style={{ border: '1px solid #8F9AFF' }}>
            <div className="left">
              <div className="left-1"><img src={require('./img/6.png').default} alt="" /></div>
              <div className="left-2" style={{ color: '#8F9AFF' }}>学生出入统计</div>
            </div>
            <div className="right">
              <div className="right-1">出入人数/次数</div>
              <div className="right-2" style={{ color: '#8F9AFF' }}>{xueNum ? xueNum : 0}/{xueCount ? xueCount : 0}</div>
            </div>
          </div>

          <div className="box" style={{ border: '1px solid #24DEF7' }}>
            <div className="left">
              <div className="left-1"><img src={require('./img/7.png').default} alt="" /></div>
              <div className="left-2" style={{ color: '#24DEF7' }}>教职工统计</div>
            </div>
            <div className="right">
              <div className="right-1">出入人数/次数</div>
              <div className="right-2" style={{ color: '#24DEF7' }}>{jiaoNum ? jiaoNum : 0}/{jiaoCount ? jiaoCount : 0}</div>
            </div>
          </div>

          <div className="box" style={{ border: '1px solid #FF7D83' }}>
            <div className="left">
              <div className="left-1"><img src={require('./img/8.png').default} alt="" /></div>
              <div className="left-2" style={{ color: '#FF7D83' }}>外来人员出入统计</div>
            </div>
            <div className="right">
              <div className="right-1">出入人数/次数</div>
              <div className="right-2" style={{ color: '#FF7D83' }}>{waiNum ? waiNum : 0}/{waiCount ? waiCount : 0}</div>
            </div>
          </div>

        </div>
        <div style={{ color: '#fff' }} className="echarts1">
          <div className="box1">
            {
              isShow1 === 1 ? <Spin spinning={true} delay={500}></Spin> : isShow1 === 2 ? <div style={{ flex: '1', width: '100%', height: '45%' }}><ReactEcharts option={option1} style={{ width: '100%', height: '100%' }}></ReactEcharts></div> : isShow1 === 3 ? '' : ''
            }
            <div className="btn">
              <Radio.Group size="small" value={handSize} buttonStyle="solid" onChange={this.handleSizeChange} >
                <Radio.Button value="1">学生</Radio.Button>
                <Radio.Button value="2">教职工</Radio.Button>
              </Radio.Group>
            </div>
            {
              isShow1 === 1 ? <Spin spinning={true} delay={500}></Spin> : isShow1 === 2 ? <div style={{ flex: '1', width: '100%', height: '45%' }}><ReactEcharts option={option2} style={{ width: '100%', height: '100%' }}></ReactEcharts></div> : isShow1 === 3 ? '' : ''
            }
          </div>
          <div className="box2">
            <div style={{ color: '#fff' }}>打卡位置分布图 </div>
            {/* <ReactEcharts option={option3} style={{ width: '100%', height: '93%', position: 'absolute', top: 0, }}></ReactEcharts> */}
            {/* <ReactEcharts option={option4} style={{ width: '100%', height: '93%', position: 'absolute', top: 0, }}></ReactEcharts> */}
            <img style={{ position: 'absolute', left: 0, bottom: 0, marginLeft: '17%' }} height="12%" width='66%' src={require('./img/imgMapBottom.png').default} alt=""></img>
            <img style={{ position: 'absolute', left: 0, bottom: 0, }} src={require('./img/111111111111111.png').default} height="30%" alt=""></img>
          </div>
          <div className="box3">
            <div className="btn1">
              <Radio.Group size="small" value={handSize1} buttonStyle="solid" onChange={this.handleSizeChange1} >
                <Radio.Button value="2">学生</Radio.Button>
                <Radio.Button value="1">教职工</Radio.Button>
                <Radio.Button value="3">外来人员</Radio.Button>
              </Radio.Group>
            </div>
            <div>
              <div>序号</div>
              <div>姓名</div>
              <div>院系</div>
              <div>位置</div>
              <div>类型</div>
              <div>出入时间</div>
            </div>
            <div className="tab-content">
              <table>
                {
                  XyOutIn6.length ? XyOutIn6.map((item, index) => (
                    <tr>
                      <td>{index + 1}</td>
                      <td>{item.person_name ? item.person_name.substring(0, 1) + '**' : ''}</td>
                      <td>{item.dept_name}</td>
                      <td>{item.device_name}</td>
                      <td>
                        <div style={{ padding: '0 3px', border: '1px solid green', boxSizing: 'border-box', borderRadius: '3px', backgroundColor: `${item.in_and_out === '入' ? 'rgb(28, 119, 223)' : 'rgb(36,224,209)'}`, color: 'rgb(9,30,87)' }}>{item.in_and_out}</div>
                      </td>
                      <td>{item.event_time}</td>
                    </tr>
                  )) : <div style={{ width: '100%', textAlign: 'center', paddingTop: '10px' }}>暂无数据</div>
                }
              </table>
            </div>
          </div>
        </div>
        {/*  */}
        <div className="footer">
          <div className="left">
            <div className="left-1">
              <div className="tab-1">
                <table className="cell">
                  <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>院系</td>
                    <td>班级</td>
                    <td>最近一次打卡</td>
                  </tr>
                {
                      NoPunchStudent.length ? NoPunchStudent.map((item, index) => (
                        <tr key={index}>
                          <td>{++index}</td>
                          <td>{item.student_name ? item.student_name.substring(0, 1) + '**' : ''}</td>
                          <td>{item.yuanxi_name}</td>
                          <td>{item.banji_name}</td>
                          <td>{item.last_time ? moment(item.last_time).format('MM-DD HH:mm') : ''}</td>
                        </tr>
                      )) : <div style={{ width: '100%', textAlign: 'center', paddingTop: '10px' }}>暂无数据</div>
                    }
                </table>
              </div>
              {/*  */}
            </div>
            <div className="left-1">
            <div className="tab-1">
                <table className="cell">
                  <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>院系</td>
                    <td>班级</td>
                    <td>出入次数</td>
                  </tr>
                {
                      churupinfan.length ? churupinfan.map((item, index) => (
                        <tr key={index}>
                          <td>{++index}</td>
                          <td>{item.person_name ? item.person_name.substring(0, 1) + '**' : ''}</td>
                          <td>{item.dept_name}</td>
                          <td>{item.class_name}</td>
                          <td>{item.inAndOutNumber}</td>
                        </tr>
                      )) : <div style={{ width: '100%', textAlign: 'center', paddingTop: '10px' }}>暂无数据</div>
                    }
                </table>
              </div>
            </div>
          </div>
          <div className="right">
            <ReactEcharts option={option5} style={{ width: '100%', height: '100%' }}></ReactEcharts>
          </div>
        </div>
        {/*  */}
      </div >
    )
  }
}
